<template>
  <div class="fund-password-container">
    <div class="header">
      <div class="back" @click="handleBack">
        <van-icon name="arrow-left" class="home-icon" />
      </div>
      <div class="title">Withdrawal Password</div>
    </div>
    <div class="password-section" v-if="has_password">
      <div class="section-title" >Old Capital Password</div>
      <div class="password-input" @click="handleShowMask(1)">
        <div v-for="i in 6" :key="i" class="input-circle">
          <div
            class="circle-inner"
            :class="{
              dash:
                oldpassword.length < i - 1 ||
                (oldpassword.length == 0 && !is_old),
              cursor: oldpassword.length === i - 1 && !hideCursor && is_old,
              star: oldpassword.length >= i,
            }"
          ></div>
        </div>
      </div>
    </div>
    <div class="password-section">
      <div class="section-title" v-if="!has_password">Set Funds Password</div>
      <div class="section-title" v-if="has_password">New Funds Password</div>
      <div class="password-input" @click="handleShowMask(2)">
        <div v-for="i in 6" :key="i" class="input-circle">
          <div
            class="circle-inner"
            :class="{
              dash: password.length < i - 1 || (password.length == 0 && is_old),
              cursor: password.length === i - 1 && !hideCursor && !is_old,
              star: password.length >= i,
            }"
          ></div>
        </div>
      </div>
    </div>

    <button class="submit-btn" @click="handleSubmit">Submit Settings</button>

    <div class="keyboard-mask" v-if="showMask" @click.stop="handleShowMask(0)">
      <div class="keyboard">
        <div class="number-grid">
          <div class="number-row">
            <button
              v-for="num in [1, 2, 3]"
              :key="num"
              @click.stop="handleNumberClick(num)"
            >
              {{ num }}
            </button>
          </div>
          <div class="number-row">
            <button
              v-for="num in [4, 5, 6]"
              :key="num"
              @click.stop="handleNumberClick(num)"
            >
              {{ num }}
            </button>
          </div>
          <div class="number-row">
            <button
              v-for="num in [7, 8, 9]"
              :key="num"
              @click.stop="handleNumberClick(num)"
            >
              {{ num }}
            </button>
          </div>
          <div class="number-row">
            <button class="zero-btn" @click.stop="handleNumberClick(0)">
              0
            </button>
          </div>
        </div>
        <div class="action-column">
          <button class="delete-btn" @click.stop="handleDelete">
            <i class="triangle-icon"></i>
          </button>
          <button class="confirm-btn" @click.stop="handleShowMask(0)">
            <i class="check-icon"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { Toast, Icon as VanIcon } from "vant";
import { UserApi } from "@/api/user.api";
import { useRouter } from 'vue-router';
const router = useRouter();
const password = ref("");
const oldpassword = ref("");
const is_old = ref(false);
const has_password = ref(false);
const hideCursor = ref(false);
const showMask = ref(false);
const handleShowMask = (num) => {
  if (num == 1) {
    is_old.value = true;
  } else if (num == 2) {
    is_old.value = false;
  }
  showMask.value = !showMask.value;
};

// Handle number input
const handleNumberClick = (num) => {
  if (password.value.length < 6) {
    if (is_old.value) {
      oldpassword.value += num.toString();
    } else {
      password.value += num.toString();
    }
  }
};

// Handle backspace
const handleDelete = () => {
  if (is_old.value == 1) {
    oldpassword.value = oldpassword.value.slice(0, -1);
  } else {
    password.value = password.value.slice(0, -1);
  }
};

// Handle back button
const handleBack = () => {
  console.log("Back clicked");
  router.go(-1);
  // Add your back navigation logic here
};

// Handle submit
const handleSubmit = () => {
  if (password.value.length === 6) {
    console.log("Password submitted:", password.value);
    if(has_password.value){
        UserApi.setPayPassword({
            oldPaymentPassword: oldpassword.value,
            paymentPassword: password.value
        }).then((res) => {
        console.log("setPayPassword", res);
        Toast("Password set successfully");
        router.go(-1);
      });
    }else{
        UserApi.setPayPassword({
            paymentPassword: password.value
        }).then((res) => {
        console.log("setPayPassword", res);
        Toast("Password set successfully");
        router.go(-1); 
        }) 
    }
    // Add your submission logic here
  } else {
    Toast("Please enter 6-digit password");
  }
};

// Cursor blinking effect
let cursorInterval;
const getIsPaymentPassword = async () => {
  try {
    const response = await UserApi.getHasPayPassword();
    console.log("getIsPaymentPassword", response);
    has_password.value = response.data.hasPaymentPassword;
    if (has_password.value) {
      is_old.value = true;
    }else{
      is_old.value = false;
    }
  } catch (error) {
    console.error("Error fetching payment password:", error);
  }
};
onMounted(() => {
  getIsPaymentPassword();
  cursorInterval = setInterval(() => {
    hideCursor.value = !hideCursor.value;
  }, 500);
});

onUnmounted(() => {
  clearInterval(cursorInterval);
});
</script>

<style scoped>
.fund-password-container {
  height: 100vh;
  background: #f5f5f5;
}

.header {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
}

.back {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.home-icon {
  width: 22px;
  height: 22px;
  font-weight: bold;
  margin-top: 6px;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.password-section {
  background: white;
  border-radius: 12px;
  margin: 20px;
  padding: 20px;
}

.section-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

.password-input {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.input-circle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background: #f5f5f5;
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-inner {
  position: relative;
  width: 2px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-inner.dash {
  width: 8px;
  height: 0.5px;
  background: #4460f6;
}

.circle-inner.cursor {
  width: 2px;
  height: 20px;
  background: #4460f6;
  animation: blink-74592911 1s infinite;
}

.circle-inner.star::after {
  content: "*";
  font-size: 20px;
  line-height: 1;
  color: #4460f6;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.submit-btn {
  width: calc(100% - 40px);
  margin: 30px 20px;
  padding: 15px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(90deg, #4460f6, #4c6fff);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.submit-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.keyboard {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f5f5f5;
  display: flex;
  padding: 8px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 -2px 10px #0000000d;
  z-index: 999;
}

.number-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.number-row {
  display: flex;
  gap: 8px;
}

.number-row button {
  flex: 1;
  height: 54px;
  border: none;
  background: white;
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin: 0;
  padding: 0;
  border-radius: 4px;
}

.zero-btn {
  flex: 1;
  height: 54px;
  border: none;
  background: white;
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin: 0;
  padding: 0;
  border-radius: 4px;
}

.action-column {
  width: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 8px;
}

.delete-btn {
  height: 60px;
  background: rgb(189, 189, 189);
  border-radius: 4px;
  border: 0px solid rgb(230, 230, 230);
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-btn {
  flex: 1;
  background: rgb(59, 66, 252);
  border: 0px solid rgb(9, 17, 251);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.triangle-icon {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #333;
  transform: rotate(-90deg);
}

.check-icon {
  position: relative;
  width: 8px;
  height: 16px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.keyboard-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 998;
}
</style>
